<template>
  <div class="success-container">

    <PageHeader :breadcrumbList="breadcrumbList">
    </PageHeader>

    <div class="body-container">
      <div class="content-container">
        <Icon type="checkmark-circled" style="color: #52c41a; margin-bottom: 20px; font-size: 88px"></Icon>
        <div class="success-text">{{successText}}</div>
        <div class="success-description">{{successDescription}}</div>
        <Card :bordered="false" dis-hover class="project-container">
          <DescriptionList title="项目名称" :descriptionList="projectname" :col="3" :gutter="32" size="large" style="margin-bottom:16px"></DescriptionList>

          <Steps :current="2">
            <Step title="创建项目" style="width:30%" icon="checkmark-circled">
              <div class="steps-item-description">
                <div class="text-secondary step-description">
                  <div>
                    曲丽丽
                    <Icon type="chatbubbles" style="margin-left:4px;"></Icon>
                  </div>
                  <div>2016-12-12 12:32</div>
                </div>
              </div>
            </Step>
            <Step title="部门初审" style="width: 30%;" icon="checkmark-circled">
              <div class="steps-item-description">
                <div class="text-secondary step-description">
                  <div>
                    周毛毛
                    <Icon type="chatbubbles" style="margin-left:4px;color:#2d8cf0"></Icon>
                  </div>
                  <div>
                    <a href>催一下</a>
                  </div>
                </div>
              </div>
            </Step>
            <Step title="财务复核" style="width: 30%;"></Step>
            <Step title="完成" style="width: 10%;"></Step>
          </Steps>
        </Card>

        <div>
          <Button type="primary" style="margin-right: 16px;" size="large">返回列表</Button>
          <Button style="margin-right: 16px;" size="large">查看项目</Button>
          <Button size="large">打印</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { PageHeader, DescriptionList } from '@/components'

export default {
  components: {
    PageHeader,
    DescriptionList
  },
  data() {
    return {
      successText: '提交成功',
      successDescription:
        '提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
      projectname: [
        {
          term: '项目ID',
          detail: '2143'
        },
        {
          term: '负责人',
          detail: '1234567'
        },
        {
          term: '生效时间',
          detail: '2016-12-12'
        }
      ],
      breadcrumbList: [
        {
          title: this.$t('home'),
          href: '/'
        },
        {
          title: this.$t('menu.result.title')
        },
        {
          title: this.$t('menu.result.submenu.success')
        }
      ]
    }
  }
}
</script>

<style scoped>
.body-container {
  background-color: white;
  margin: 24px;
  padding: 60px 30px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.success-text {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  line-height: 32px;
  margin-bottom: 16px;
}
.success-description {
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 24px;
}
.content-container {
  text-align: center;
  width: 72%;
  min-width: 500px;
  margin-top: 48px;
  margin-bottom: 16px;
}
.project-container {
  background: #fafafa;
  padding: 24px 40px;
  border-radius: 2px;
  text-align: left;
  margin-bottom: 30px;
}
.step-description {
  font-size: 14px;
  position: relative;
}

.step-description > div {
  margin-top: 8px;
  margin-bottom: 4px;
}

.text-secondary {
  color: rgba(0, 0, 0, 0.45);
}
</style>

<style>
.success-container .iterm {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65) !important;
}
.success-container .tablename .ivu-table {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65) !important;
}
.success-container .ivu-table {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65) !important;
}
.success-container .ivu-steps-title {
  background: #fafafa;
}
.success-container .ivu-steps-head {
  background: #fafafa;
}
.success-container .ivu-steps-main {
  display: block;
}

.success-container .ivu-steps .ivu-steps-content {
  padding-left: 0;
  line-height: 1.5;
}

.success-container .ivu-steps .ivu-steps-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  display: inline-block;
  padding-right: 0;
  position: relative;
  line-height: 1.5;
  margin-bottom: 0;
}

.success-container .ivu-steps .ivu-steps-status-wait .ivu-steps-title {
  color: rgba(0, 0, 0, 0.45);
}

.success-container .ivu-steps .ivu-steps-tail > i {
  height: 2px;
}
</style>

